<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:51:41
 * @LastEditTime: 2023-05-19 20:40:23
-->

<!--规则 -->
<template>
    <!-- <div class="mask"></div> -->
      <div class="rule-box" v-show="props.isShow">
    <div :class="['rule-inner', 'dialog-inner', props.isShow && 'scale-in-center']">
        <!-- <img src="../../public/images/close.png" alt="" class="close-icon" @click="$emit('handleClose')"> -->
        <!-- <img src="/public/images/rule_box.png" alt="" class="rule_box_data"> -->
        <div class="title">活动规则</div>
        <div class="rule_content">
            <p>
                <b>1、活动时间: </b>2024.1.19-1.28
            </p>
            <p>
                <b>2、活动对象: </b>Topspace注册用户
            </p>
            <!-- <p>
                <b>3、活动规则：</b>活动期间，车主每日5次投掷骰子机会，根据投掷骰子得出点数，在棋盘格图上移动相应步数，在停留站点有机会触发奖励事件。
            </p> -->
            <!-- <p>
                1.活动期间，车主每日可参与幸运 U 行棋游戏，共五次投掷骰子机会，通过投掷骰子得出点数，在无边界棋盘格图上移动相应步数，在停留站点有机会触发奖励事件;
            </p>
            <p>
                2.棋子停留时，棋盘将随机出现以下奖励事件：<br />
                U 形充能站：获得1-100随机 U 乐值，U 乐值将纳入周度排行，排行TOP100用户会获得额外奖励；<br />
                U 币补给站：获得5-200随机 U 币面额；
                幸运盲盒站：获得对应实体奖励；
                好运加一站：获得额外1次投掷机会。
            </p> -->
            <p>
                <b>3、活动玩法：</b>
            </p>
            <!-- <p>
                ◆日日有奖：
            </p> -->
            
            <p>
                ① 登录有礼。活动期间，注册用户每日登录Topspace进入游戏可获得一次掷骰子机会，根据掷骰子点数，在格子上移动相应步数，在停留站点触发随机奖励物品；<br/>
                ② 分享福利。活动期间，注册用户当日完成活动分享获得1次额外投掷机会；<br/>
                *每人每天至高两次投掷机会
            </p>
            <p>
                
            </p>
            <!-- <p>
                ◆榜单大奖：
            </p>
            <p>
                活动期间，车主每日参与获取U星能，抢占周度U星能排行榜，排行TOP500获得额外奖励，奖励设置如下：
            </p> -->
            <!-- <p style="margin: 5px 0;">
                <img src="https://yinli-qixi-run.varwey.com/2023_ca/u_chess/images/rule-table.png" alt="" />
            </p>
            <p style="font-size: 12px;">注：U星能周度排行榜单将于9月4日0点自动锁定，榜单奖励可于我的奖品页面查看。</p> -->
            <p>
                <b>4、奖励设置：</b>
            </p>
            <p>
                ① 实物奖励（多功能电煮锅、声波电动牙刷、快充无线充电宝）<br />
                ② TOP币奖励-随机数额TOP币（届时请前往【我的家】-【我的TOP币】查看）<br />
                *活动奖励将在活动结束后10个工作日内发放，请耐心等候
            </p>
            <p>
                注：若用户出现违规行为（如利用黑客工具、软件作弊），Topspace有权取消用户参与资格并收回已发放奖品。
            </p>
            <!-- <p>
                1.代金券需及时领取和兑换，代金券发放后超过兑换期限未兑换,则视为自动放弃该奖品:<br />
                2.实物奖品具体发货时间以 UNI 商城时间为准; 如果中奖用户收到的奖品出现质量问题( 非质量问题不退换 )，可及时与小 U 沟通反馈，官方将为您妥善解决。
            </p> -->
            <!-- <p>
                <b>6、活动说明：</b>活动期间，若用户出现违规行为（如利用黑客工具、软件作弊等），引力域有权取消用户参与资格并收回已发放奖品。
            </p> -->
        </div>
        <div class="footer">
            <div><div class="btn" role="button" @click="$emit('handleClose')">确认</div></div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { Popover } from 'vant'; 
import { onMounted } from 'vue';
import { getUserInfo } from '../appSdk';
onMounted(() => {
    getUserInfo((result) => {
        console.log(result,'http://172.20.10.3:5173/')
    })
})
const props = defineProps({
	isShow:{
		type:Boolean,//类型字符串
		default:false//如果没有传递msg参数,默认值是这个
	},
})


</script>
<style lang="scss"  scoped>
:root:root {
    --van-dialog-width: 400px;
}

.rule-box{
    text-align: left;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    top: 0;
}
.rule-inner{
    width: 643px;
    height: 1100px;
    position: relative;
    border-radius: 30px;
    background-image: url(#{$base_path}/images/rule-bg.png);
    filter: brightness(0.9);
}
.rule_box_data{
    width: 100%;
    height: 100%;
}
.close-icon{
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-130%);
    width: 52px;
    height: 52px;
}
.rule_content{
    position: absolute;
    width: 530px;
    height: 1000px;
    top: 0;
    left: 10%;
    bottom: 0;
    right: 0;
    line-height: 1.5;
    /* margin: auto; */
    overflow-y: scroll;
    color: #fff;
    font-family: "ChangAnunitype-Regular";
    font-size: 26px;
    padding-right: 20px;
    margin-top: 140px;
    text-align: justify;
    /* margin-bottom: 20px; */
}

.rule_content b {
    font-family: "ChangAnunitype-Bold";
}

.footer > div {
    // width: 255px;
    // height: 64px;
    // margin-bottom: 25px;
    // box-shadow: 7px 10px 35px rgba(23, 105, 175, .57);
    // border-radius: 50px;
}

/* .rule_content::-webkit-scrollbar {
    width: 10px;
}
.rule_content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d55959;
}
.rule_content::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
} */

</style>